<template>
  <div class="login--wrap">
    <div class="login--head">
      <div class="head--left">中医腹诊大数据管理系统</div>
      <div class="head--mid">
        <div class="head--mid--item">
          <MySvg type="watch" />
          <span class="head--mid--item--w" :style="{ marginLeft: '5px' }"
            >数据看板</span
          >
        </div>
        <div class="head--mid--item">
          <MySvg type="data" />
          <span class="head--mid--item--w" :style="{ marginLeft: '5px' }"
            >数据分析</span
          >
        </div>
        <div class="head--mid--item">
          <MySvg type="login" />
          <span class="head--mid--item--w active" :style="{ marginLeft: '5px' }"
            >登录</span
          >
        </div>
        <div class="head--mid--item">
          <MySvg type="register" />
          <span class="head--mid--item--w" :style="{ marginLeft: '5px' }"
            >注册</span
          >
        </div>
      </div>
      <div class="head--right">
        <a-button
          type="primary"
          :style="{ width: '140px', height: '45px', 'border-radius': '30px' }"
          >注册</a-button
        >
      </div>
    </div>
    <div class="login-container">
      <div class="login--con--left">
        <div class="login--con--left--title">登录</div>
        <div class="login--con--left--subTitle">请输入您的用户名和密码登录</div>
        <a-form
          :model="formState"
          name="basic"
          autocomplete="off"
          @finish="onFinish"
          layout="vertical"
        >
          <a-form-item
            label="Username"
            name="username"
            :rules="[{ required: true, message: '请输入用户名!' }]"
          >
            <a-input
              placeholder="用户名"
              :style="{ width: '450px', height: '45px' }"
              v-model:value="formState.username"
            />
          </a-form-item>
          <a-form-item
            label="Password"
            name="password"
            :rules="[{ required: true, message: '请输入密码!' }]"
          >
            <a-input-password
              placeholder="密码"
              :style="{ width: '450px', height: '45px' }"
              v-model:value="formState.password"
            />
          </a-form-item>
          <a-form-item label="Remember me">
            <a-switch v-model:checked="checked" />
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              :style="{ width: '450px', height: '45px' }"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
        <div :style="{ color: '#707070' }">
          Don't have an account? <span :style="{ color: '#000' }">Sign Up</span>
        </div>
      </div>
      <div class="login--con--right">
        <img src="../assets/352.jpg" alt="" />
      </div>
    </div>
    <div class="login--footer">
      <div class="footer--list">
        <div class="list--item" :style="{ color: '#707070' }">Company</div>
        <div class="list--item" :style="{ color: '#707070' }">About Us</div>
        <div class="list--item" :style="{ color: '#707070' }">Team</div>
        <div class="list--item" :style="{ color: '#707070' }">Products</div>
        <div class="list--item" :style="{ color: '#707070' }">Blog</div>
        <div class="list--item" :style="{ color: '#707070' }">Pricing</div>
      </div>
      <div class="footer--list">
        <div class="list--item"><SmileOutlined /></div>
        <div class="list--item"><GithubOutlined /></div>
        <div class="list--item"><TwitterOutlined /></div>
        <div class="list--item"><WechatOutlined /></div>
        <div class="list--item"><WeiboOutlined /></div>
        <div class="list--item"><YoutubeOutlined /></div>
      </div>
      <div :style="{ color: '#707070', padding: '10px 20px' }">
        Copyright © 2025 Muse by Creative Cobot.
      </div>
    </div>
  </div>
</template>

<script>
import {
  SmileOutlined,
  GithubOutlined,
  YoutubeOutlined,
  WeiboOutlined,
  WechatOutlined,
  TwitterOutlined,
} from "@ant-design/icons-vue";
import MySvg from "../components/MySvg.vue";
export default {
  name: "Login",
  data() {
    return {
      formState: {
        username: "",
        password: "",
      },
      checked: false,
    };
  },
  components: {
    MySvg,
    SmileOutlined,
    GithubOutlined,
    YoutubeOutlined,
    WeiboOutlined,
    WechatOutlined,
    TwitterOutlined,
  },
  methods: {
    async onFinish() {
      if (
        this.formState.username == "admin" &&
        this.formState.password == "123456"
      ) {
        this.$message.success("登录成功!");
        this.$router.push({ name: "main" });
      } else {
        this.$message.error(`登录失败,用户或密码错误!`);
      }
    },
  },
};
</script>

<style scoped lang="less">
.login--wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
  .login--head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    background-color: #fff;
    padding: 0 50px;
    background-color: #fff;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    .head--left {
      font-weight: 600;
      font-size: 23px;
    }
    .head--mid {
      width: 30%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .head--mid--item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
      }
      .head--mid--item--w {
        color: #8b8484;
        font-size: 15px;
        &.active {
          color: #000;
        }
      }
    }
  }
  .login-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 250px);
    .login--con--left {
      height: 100%;
      display: flex;
      align-items: start;
      justify-content: center;
      flex-direction: column;
      padding: 30px 100px;
      box-sizing: border-box;
      .login--con--left--title {
        color: #000;
        font-size: 40px;
        margin-bottom: 20px;
        font-weight: bold;
      }
      .login--con--left--subTitle {
        color: #707070;
        font-size: 25px;
        margin-bottom: 20px;
      }
    }
    .login--con--right {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 700px;
        border-radius: 30px;
        object-fit: contain;
      }
    }
  }
  .login--footer {
    width: 100%;
    height: 180px;
    padding: 24px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .footer--list {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      .list--item {
        margin-right: 28px;
        font-size: 15px;
        cursor: pointer;
      }
    }
  }
}
</style>
